<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>腾讯官网新闻版块</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css" />
		<style>
			*{margin: 0;padding: 0;}
			.my-out{
				margin: 0 auto;
				height: 1200px;
			}
			@media(max-width:575px){
				.tx-news{
					width: 100%;
				}
			}
			/* 屏幕在576px到767px之间显示 */
			/* sm的效果 */
			@media(min-width:576px) and (max-width:767px) {
				.my-out{
					width: 100%;
				}
			}
			/* 屏幕在768px到991px之间显示 */
			/* md的效果 */
			@media(min-width:768px) and (max-width:1199px) {
				.my-out{
					width: 100%;
				}
			}
			@media(min-width:1200px){
				.my-out{
					width: 1200px;
				}
			}
			.color1{
				width: 100%;
				height: 1200px;
			}
			.color2{
				width: 100%;
				height: 1200px;
			}
			.box1{
				height: 386px;
				background-color: pink;
			}
			.box2{
				height: 386px;
				background-color: darkorange;
				margin-top: 20px;
			}
			.box3{
				height: 386px;
				background-color: darkgoldenrod;
				margin-top: 20px;
			}
			.box4{
				height: 388px;
				background-color: darkcyan;
				margin-top: 20px;
			}
			.box5{
				height: 386px;
				background-color: darksalmon;
				margin-top: -20px;
			}
			.box6{
				height: 386px;
				background-color: hotpink;
				margin-top: 40px;
			}
			.box7{
				height: 388px;
				background-color: darkkhaki;
				margin-top: 40px;
			}
		</style>
	</head>
	<body>
		<div class="layui-row layui-col-space25 my-out">
			<div class="layui-col-xs12 layui-col-sm8 layui-col-md8">
				<div class="layui-row color1">
					<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 box1"></div>
					<div class="layui-row layui-col-space25">
						<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
							<div class="box2"></div>
						</div>
						<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
							<div class="box3"></div>
						</div>
					</div>
					<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 box4"></div>
				</div>
			</div>
			<div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
				<div class="layui-row color2">
					<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 box5"></div>
					<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 box6"></div>
					<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 box7"></div>
				</div>
			</div>
		</div>
	</body>
	<script src="layui/layui.js"></script>
</html>